import h from './mysnabbdom/h.js'
import patch from './mysnabbdom/patch.js'

const myVnode1 = h(
    "ul", {}, [
        h('li', { key: 'A' }, 'A'),
        h('li', { key: 'B' }, 'B'),
        h('li', { key: 'C' }, 'C')
    ]
);

// 得到盒子和按钮
const container = document.getElementById('container')
const btn = document.getElementById('btn')

// 第一次上树
patch(container, myVnode1)

// 新节点
const myVnode2 = h(
    "ul", {}, [
        h('li', { key: 'A' }, 'A'),
        h('li', { key: 'B' }, 'B'),
        h('li', { key: 'D' }, 'D'),
        h('li', { key: 'D' }, 'E'),
        h('li', { key: 'C' }, 'C'),
        h('li', { key: 'C' }, 'F'),
        h('li', { key: 'G' }, 'G'),
    ] 
)

btn.onclick = function() {
    patch(myVnode1, myVnode2)
}